<template>
  <Teleport to="body">
    <Transition name="fade">
      <div class="biz__loading" v-show="loading">
        <div class="biz__loading__container">
          <div class="biz__spinner"></div>
          <div class="biz__spinner"></div>
          <div class="biz__spinner"></div>
        </div>
        <div class="biz__loading__text">
          <slot>
            <div class="biz_default__text">
              <span style="--i: 1">L</span>
              <span style="--i: 2">o</span>
              <span style="--i: 3">a</span>
              <span style="--i: 4">d</span>
              <span style="--i: 5">i</span>
              <span style="--i: 6">n</span>
              <span style="--i: 7">g</span>
              <span style="--i: 8">.</span>
              <span style="--i: 9">.</span>
              <span style="--i: 10">.</span>
            </div>
          </slot>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
defineOptions({
  name: "Loading"
});
interface LoadingProps {
  loading: boolean;
}
defineProps<LoadingProps>();
</script>

<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.biz__loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // 集成element-plus遮罩样式
  background-color: var(--el-mask-color);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  .biz__loading__container {
    position: relative;
    width: 300px;
    height: 300px;
    .biz__spinner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      animation: spin__spinner 2000ms cubic-bezier(0.275, 0.085, 0.62, 1.275) infinite;
    }
    .biz__spinner:nth-child(1) {
      width: 200px;
      height: 200px;
      border: 6px solid #0c73fe;
      clip-path: polygon(100% 50%, 0 50%, 0 0, 100% 0);
      animation-delay: 0ms;
    }
    .biz__spinner:nth-child(2) {
      width: 160px;
      height: 160px;
      border: 6px solid #fdc56e;
      clip-path: polygon(100% 50%, 0 50%, 0 0, 100% 0);
      animation-delay: -400ms;
    }
    .biz__spinner:nth-child(3) {
      width: 120px;
      height: 120px;
      border: 6px solid rgb(209, 67, 212);
      clip-path: polygon(100% 50%, 0 50%, 0 0, 100% 0);
      animation-delay: -240ms;
    }
  }
  .biz__loading__text {
    position: absolute;
    top: 50%;
    left: 50%;
    // 集成element-plus字体样式
    color: var(--el-color-primary);
    letter-spacing: 3px;
    transform: translate(-50%, -50%);
    .biz_default__text {
      span {
        font-size: 14px;
        display: inline-block;
        animation: spin__spinner_inner 1.5s ease-in-out infinite;
        animation-delay: calc(0.1s * var(--i));
      }
    }
  }
}
@keyframes spin__spinner {
  0%,
  15% {
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes spin__spinner_inner {
  0% {
    transform: translateY(0px);
    // 集成element-plus字体样式
    color: var(--el-color-primary);
  }
  20% {
    transform: translateY(-10px);
  }
  40%,
  100% {
    transform: translateY(0px);
  }
}
</style>
